<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .father{
            width: 100vw;
            height: 50vh;
            background-color: gold;
            display: flex;
            /* flex-direction: column; */
            /* flex-wrap: wrap; */
            /* justify-content: space-around; */
            /* justify-content: space-between; */
            /* justify-content: space-evenly; */
            /* align-items: center;
            justify-content: center; */
        }
        /* 
            flex布局：
                四个概念：
                    1）容器    如果给一个div添加display:flex; 那这个div就是容器
                    2）项目    容器中的直接子元素就是项目
                    3）主轴    默认主轴是水平向右的  项目在主轴上排列
                    4）交叉轴  和主轴垂直的那个轴

                容器相关的属性：
                    flex-direction: 改变主轴方向
                    flex-wrap: 是否换行
                    justify-content: 设置项目在主轴上的对齐方式（处理主轴上的富余空间）
                    align-items: 设置项目在交叉轴上的位置关系
                    
                项目相关的属性：
                    flex:  flex:1  
        */
        .son{
            width: 100px;
            height: 100px;
            flex: 1;
        }
        .son1{ background-color: red; }
        .son2{ background-color: blue; }
        .son3{ background-color: yellowgreen; }
    </style>
</head>
<body>
    <div class="father">
        <div class="son son1">son1</div>
        <div class="son son2">son2</div>
        <div class="son son3">son3</div>
    </div>
</body>
</html>